<template>
    <div class="container">
        <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }" :loading="loading">
            <a-form-item label="标题" style="margin-top: 30px;">
                <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入文章标题！' }] }]" v-model="title"/>
            </a-form-item>
            <a-form-item label="页面正文">
                <Editor
                    v-if="editor === 'mavon'"
                    :editorChange="editorChange"
                    :content.sync="content"
                ></Editor>
                <WangEditor
                    v-else
                    :editorChange="editorChange"
                    :content.sync="content"
                ></WangEditor>
            </a-form-item>
            <a-form-item label="url" style="margin-top: 30px;">
                <a-input v-model="url" v-decorator="['title', { rules: [{ required: true, message: '请输入 url！' }] }]" placeholder="url 是为了更好的 SEO 效果，对于页面则必需填写"/>
            </a-form-item>
            <a-form-item label="创建日期" style="margin-top: 30px;">
                <a-date-picker
                    v-model="create_time"
                    locale="zh-CN"
                    valueFormat="YYYY-MM-DD"
                    placeholder="指定创建日期"
                    dropdownClassName="createTimeClassName"
                />
                <span style="color: gray; margin-left: 20px;">如果不指定创建日期，则默认为发布时间</span>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 2 }">
                <a-button type="primary" @click="onSubmitClick" :loading="loading">发布</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import { addNewPage, getPageRow, savePage } from '../../../api/page.js'
import { openPagePage } from '../../../utils/url'
import Editor from '../../editor'
import WangEditor from '../../editor/WangEditor'
import { getSetting } from "../../../api/setting";

export default {
    name: 'Newpage',
    components: { Editor, WangEditor },
    data() {return {
        title: '',
        content: '',
        contentHtml: '',
        url: '',
        loading: false,
        create_time: '',
        editor: 'mavon'
    }},
    mounted() {
        const id = this.$route.query.id
        if (id) {
            this.loading = true
            getPageRow({id: id}).then(res => {
                this.loading = false
                this.id = res.data.id
                this.contentHtml = res.data.content_html
                this.content = res.data.content_md
                this.title = res.data.title
                this.url = res.data.url
                this.create_time = res.data.create_time
            }).catch(e => {
                this.loading = false
                this.$message.error(e.msg)
            })
        }

        getSetting({
            types: 'editor'
        }).then(res => {
            this.editor = res.data.find(v => v.type == 'editor').value || ''
        }).catch(e => {
            console.error(e);
            this.$message.error(e.msg || '暂未配置编辑器')
        })
    },
    methods: {
        /**
         * 编辑器值变化回调
         * v 原文
         * h 解析后的 html
         */
        editorChange(v, h) {
            console.log(v, h);
            // this.content = v
            this.contentHtml = h
        },

        /**
         * 发布按钮点击
         */
        onSubmitClick() {
            console.log(this.title, this.content, this.category, this.contentHtml);
            if (!this.url) {
                this.$message.error('请填写 url')
                return
            }
            this.loading = true
            if (this.id > 0) {
                const data = {
                    id: this.id,
                    title: this.title,
                    content_md: this.content,
                    category: this.category,
                    content_html: this.contentHtml,
                    url: this.url
                }
                if (this.create_time) {
                    data.create_time = this.create_time
                }
                savePage(data).then(res => {
                    this.loading = false
                    this.$message.success('发表成功')
                }).catch(e => {
                    this.loading = false
                    this.$message.error(e.msg)
                })
            } else {
                const data = {
                    title: this.title,
                    content_md: this.content,
                    category: this.category,
                    content_html: this.contentHtml,
                    url: this.url
                }
                if (this.create_time) {
                    data.create_time = this.create_time
                }
                addNewPage(data).then(res => {
                    this.loading = false
                    this.$message.success('发表成功')
                }).catch(e => {
                    this.loading = false
                    this.$message.error(e.msg)
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}
</style>


